<script>
import opinion from "@/view/pc/opinion.vue";
export default {
  name: "homeList",
  props: {},
  components:{
    opinion
  },
  data() {
    return {
      topData: [
        {name: '作品提交'},
        {name: '分站赛'},
        {name: '半决赛'},
        {name: '决赛'}
      ],
      menuSelect: 2,
      activeName: 0,
      tabData: [
        {name: '半决赛作品'},
      ]
    }
  },
  methods: {

    menuChange(item, index) {
      this.menuSelect = index
      console.log(item, index);
    },
    returnGo() {
      this.$router.go(-1);// 返回上一个页面
    },
    handleClick(e) {
      console.log(e);
      // this.activeName = e
    }

  }
}
</script>

<template>
  <div class="clearfix table-out">
    <div class="clearfix out-con">
      <el-button type="primary" plain size="small" class="return pointer" @click="returnGo"><i
          class="iconfont icon-fanhui"></i> 返回
      </el-button>
      <ul class="menu-top pos-rel clearfix">
        <span class="point-pub pos-abs left" :class="{focus:menuSelect==0}"></span>
        <span class="point-pub pos-abs right" :class="{focus:menuSelect==topData.length-1}"></span>
        <li class="fxl pos-rel" :class="{'focus':index == menuSelect}"
            :style="{width:`${(100/topData.length).toFixed(0)}%`}"
            v-for="(item,index) in topData"
            @click="menuChange(item,index)"
            :key="index">
          <p class="iconfont pos-rel icon" :class="{'icon-tijiao':index==0,'icon-jiangbei1':index!=0}"></p>
          <p class="name">{{ item.name }}</p>
        </li>
      </ul>
      <div class="clear h20"></div>
      <div class="tab-list clearfix">
        <el-tabs
            v-model="activeName"
            type="card"
            class="demo-tabs"
            @tab-click="handleClick">
          <el-tab-pane v-for="(item,index) in tabData" :label="item.name" :key="index" :name="index">{{
              item.name
            }}
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
    <opinion></opinion>
  </div>
</template>

<style scoped lang="less">
.out-con {
  padding: 10px;
  width: 85%;
  height: calc(100% - 20px);
}

.return {
  font-size: 14px;
  opacity: .6;
}

.menu-top {
  padding: 10px;

  &:before {

  }

  li {
    display: flex;
    cursor: pointer;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    font-size: 14px;

    &.focus {
      .name {
        color: #fb830d;
      }

      .icon {
        background: #fbe5c5;
        color: #fa9837;
        text-shadow: 0px 0px 5px rgba(255, 255, 255, 0.7);

        &:after {
          background: #fb830d;
          opacity: .6;
        }
      }

      &:after {
        border-top: 4px dotted #fb830d;
        opacity: .6;
      }
    }

    &:after {
      z-index: -1;
      position: absolute;
      content: '';
      display: block;
      border-top: 4px dotted #ededed;
      height: 4px;
      left: 0px;
      width: 100%;
      top: 50%;
      margin-top: -17px;
    }

    .name {
      color: #bdbaba;
      height: 30px;
      line-height: 30px;
    }
  }

  .icon {
    width: 80px;
    height: 80px;
    background: #ebebeb;
    border-radius: 100%;
    display: flex;
    overflow: hidden;
    border: 5px solid #fff;
    justify-content: center;
    align-items: center;
    z-index: 10;
    font-size: 40px;
    color: rgba(148, 148, 148, 0.7);

    &:after {
      z-index: -1;
      position: absolute;
      content: '';
      width: 160px;
      height: 160px;
      top: 50%;
      left: -40px;
      background: #d7d7d7;
      border-radius: 100%;
    }

  }
}

.point-pub {
  width: 6px;
  height: 6px;
  background: #e1e1e1;
  border: 4px solid #ededed;
  border-radius: 100%;
  top: 49px;

  &.focus {
    background: #f89431;
    border: 4px solid rgb(250 216 181);
  }

  &.right {
    right: -5px;
  }

  &.left {
    left: -5px;
  }
}

:deep(.el-tabs--card>.el-tabs__header) {
  border: 0px;
}

:deep(.el-tabs--card>.el-tabs__header .el-tabs__item) {
  background: #e7e7e7;
  border: 0px;
}

:deep(.el-tabs--card>.el-tabs__header .el-tabs__item.is-active) {
  background: #E90D00;
  color: #fff;
  border: 0px;
}
</style>